<script setup lang="ts">
import { ref } from 'vue'
import { useBaseHooks } from '@/utils/hooks/baseHooks'
import BlockCard from '@/components/BlockCard.vue'

const actionBarObj = ref([
  { id: 1, icon: 'credit-pay', label: '待付款', routerName: 'orderList', mode: '1' },
  { id: 2, icon: 'logistics', label: '待发货', routerName: 'orderList', mode: '2' },
  { id: 3, icon: 'certificate', label: '待收货', routerName: 'orderList', mode: '3' },
  { id: 4, icon: 'refund-o', label: '退款/售后', routerName: 'orderDealList' },
  { id: 5, icon: 'orders-o', label: '我的订单', routerName: 'orderList', mode: '0' },
])

const { defaultUserImg } = useBaseHooks()

</script>
<template>
  <div class="user">
    <div class="head-action-bar">
      <van-image
        round
        width="16vw"
        height="16vw"
        fit="cover"
        lazy-load
        :src="defaultUserImg"
      />
      <div class="right-block">
        <span>用户名称</span>
      </div>
    </div>
    <BlockCard>
      <div class="action-bar-1">
        <div class="btn-item"
          v-for="item in actionBarObj"
          :key="item.id"
          @click="$router.push({
            name: item.routerName,
            query: { mode: item.mode },
          })">
          <van-icon :name="item.icon" />
          <span>{{ item.label }}</span>
        </div>
      </div>
    </BlockCard>
    <van-cell-group inset>
      <van-cell title="地址管理" is-link @click="$router.push('/addressList')" />
      <van-cell title="账户安全" is-link @click="$router.push('/user/accountSecurity')" />
      <van-cell title="信息编辑" is-link @click="$router.push('/user/info')" />
    </van-cell-group>
  </div>
</template>
<style lang="scss" scoped>
.user {
  .head-action-bar {
    display: flex;
    padding: 30px 15px;
    background: linear-gradient(#abe5f5, var(--color-background));
    .right-block {
      padding-left: 10px;
      font-weight: 700;
      font-size: 30px;
    }
  }
  .action-bar-1 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    .btn-item {
      flex: 1 1 auto;
      text-align: center;
      i {
        display: block;
        font-size: 70px;
      }
      span {
        font-size: 24px;
      }
    }
  }
}
</style>